<template>
	<view class="custome">
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="item in tableData">
				<view class="cu-avatar radius lg" :style="{'background-image':'url('+ item.picUrl +')'}"></view>
				<view class="content">
					<view class="text-grey">{{item.title}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">{{item.details}}</view> 
					</view>
				</view>
				<view class="action">
					<view class='cu-tag round line-green' @tap="showModal($event,item)" data-target="Image">加好友</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="hideModal">
				<view class="cu-dialog">
					<view class="cu-bar justify-end header">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="imgbox">
						<view class="title">{{codeObj.title}}</view>
						<image :src="codeObj.qrCodeUrl" class="img"></image>
						<view class="info">
							长按二维码
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { kefuListApi } from '@/common/requestjs/goods_api.js'
export default {
	data() {
		return {
			tableData:[],
			modalName:null,
			codeObj:{
				title:'',
				codeimg:'',
			}
		}
	},
	created() {
		this.getData()
	},
	methods: {
		getData () {
			this.$API.kefuListApi('wx7fa156568cfba901').then((res) => {
				this.tableData = res.data
			})
			// let num = 20
			// let arr = []
			// for(var i = 0; i < num; i++){
			// 	let data = {
			// 		img: '../../static/ren1.jpg',
			// 		codeimg: '../../static/kf1.jpg',
			// 		title: 'vip专属客服'+(i+1),
			// 		info: '出现不能付款，不能入群等问题，请联系我！看到信息必回。',
			// 	}
			// 	arr.push(data)
			// }
			
			// this.tableData = arr
		},
		showModal(e,item) {
			this.codeObj = item
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
	}
}
</script>

<style lang="scss" scoped>
.cu-modal .cu-dialog>.cu-bar:first-child .action .cuIcon-close{
	font-size: 50rpx; 
	color: #f37b1d;
	padding: 10rpx;   
    background-color: #fde6d2;
	border-radius: 50%;
}
.cu-modal{
	.cu-dialog{
		background-color: #FFFFFF;
		border-radius: 50rpx;
	}
	.imgbox{
		padding: 0rpx 0px 80rpx;
		.title{
			font-size: 40rpx;
			color: #333333;
			
		}
		.img{
			width: 300rpx;
			height: 300rpx;
			margin-top: 20rpx;
		}
		.info{
			color: #828181;
		}
	}
}
.cu-list.menu-avatar>.cu-item:last-child::after{
	border: none;
}
.custome{
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	margin-top: 20rpx;
}
.lg{
	width: 150rpx;
	height: 150rpx;
}
.text-grey{
	font-weight: 700;
	color: #333333;
}
.cu-list.menu-avatar>.cu-item .content>uni-view:first-child{
	font-size: 35rpx;
}
.cu-list.menu-avatar>.cu-item{
	height: 200rpx;
}
.cu-list.menu-avatar>.cu-item>.cu-avatar{
	left:10rpx;
}
.cu-list.menu-avatar>.cu-item .content{
	left: 170rpx;
}
.cu-list.menu-avatar>.cu-item .flex .text-cut{
	letter-spacing: 0;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	white-space: normal;
	-webkit-line-clamp: 2;  /*要显示的行数*/
	-webkit-box-orient: vertical;
	font-size:29rpx;
	color: #7e7e7e;
}
.cu-card.case .image .cu-bar{
	display: flex;
	justify-content: center;
}
.cu-card.case .image .cu-bar .text-cut{
	font-size: 32rpx;
	font-weight: bold;
	color: #5dc09b;
	height: 130rpx;
	line-height: 130rpx;
}
.cu-card.case .image .title{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	font-size: rpx;
	color: #FFFFFF;
	font-weight: bold;
	position: absolute;
	top: 50rpx;
}
.cu-card.case .image .title .small{
	font-size: 40rpx;
	color: #fcc709;
}
.cu-card.case .image uni-image img{
	border-radius: 50rpx;
}
.cu-list.menu-avatar>.cu-item .action{
	width: 150rpx;
}
.cu-tag{
	font-size: 25rpx;
	height: 50rpx;
	padding: 0rpx 25rpx;
	border-width: 2rpx;
}
.text-gray, .line-gray, .lines-gray{
	margin-right: 20rpx;
}
.cu-avatar{
	border-radius: 10rpx;
}
</style>
